import {useEffect, useState} from 'react';
import { ConfigProvider,Button,Tag,Table,Popconfirm,message,Modal,Form,Input, DatePicker } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/locale/zh_CN';
import './App.css';
import taskService from './service/task';
const {Column}= Table;
//定义完成的状态
const TASK_STATUS = [
	//label是显示的文本 value是实际的值
	{label:'全部',value:'all'},
	{label:'未完成',value:1},
	{label:'已完成',value:2}
]
function App() {
	//这是过滤器，可以过滤出特定的状态all 全部 1未完成 2已完成
	const [filter,setFilter] = useState('all');
	//定义一个状态，保存列表，此数据应该读取接口，获取返回值并进行更新
	const [tasks,setTasks] = useState([]);
	const [filteredTasks,setFilteredTasks] = useState([]);
	//定义一个loading状态，当请求接口的时候loading设置为true,
	//不管成功还是失败如果结果回来的时候设置为false
	const [loading,setLoading] = useState(false);
	//定义一个状态，表示是否要打开添加任务的模态窗口
	const [addTaskVisible,setAddTaskVisible] = useState(false);
	//调用Form的自定义hooks方法，创建一个form实例
	let [form] = Form.useForm();
	const  retrieveTasks = async ()=>{
		try{
			//开始调用接口之前把loading设置true
			setLoading(true);
			//调用task对象的getTasks方法获取返回的任务列表
			let tasks = await taskService.getTasks();
			//调用setTasks方法修改状态，状态改变后组件的会重新刷新
			setTasks(tasks)
		}catch(error){
			message.error('获取任务列表失败');
		}finally{
			//不管成功还是失败，最后都设置为false
			setLoading(false);
		}
	}
	const handleDelete = async (id)=>{
		try{
			await taskService.deleteTask(id);
			await retrieveTasks();
			message.success('任务成功删除');
		}catch(error){
			message.error('任务成删除失败');
		}
	}
	const handleComplete = async (id)=>{
		try{
			await taskService.completeTask(id);
			await retrieveTasks();
			message.success('任务成功完成');
		}catch(error){
			message.error('任务完成失败');
		}
	}
	const handleNewTask = async ()=>{
		try{
			//先对表单中的字段进行较验,判断输入的是否合法
			let values = await form.validateFields();
			//调用添加任务的接口添加一任务
			await taskService.createTask({
				...values,
				expected_completion_time:values.expected_completion_time.format('YYYY-MM-DD HH:mm:ss')
			});
			//关闭添加的模态窗口
			setAddTaskVisible(false);
			//重新获取最新的任务列表数据
			retrieveTasks();
			//重置表单的数据，也就是清所有的输入的值,准备下一次输入
			form.resetFields();
			message.success('任务创建成功');
		}catch(error){
			//获取错误字段
			const {errorFields} = error;
			//声明错误消息数组
			let errorMessages = [];
			//遍历错误字段
			errorFields.forEach(errorField=>{
				//把每个错误字段的错误技术添加到错误消息数组
				errorMessages.push(...errorField.errors);
			});
			//message.error(errorMessages.join(','));
			console.error(error)
		}
	}
	//编写一个副作用函数，当组件初次挂载成功后，调用retrieveTask方法调用后台API接口获取数据并保存在tasks状态中
	useEffect(()=>{
		retrieveTasks();
	},[]);
	useEffect(()=>{
		//当tasks或filter的值发生变化后会重新执行副作用函数
		//对原始的数组进行过滤，如果当前的过滤器是all或者此task的状态和过滤器状态一样的话就留下
		let filteredTasks = tasks.filter(task=> filter === 'all'||task.status == filter);
		setFilteredTasks(filteredTasks);
	},[tasks,filter]);//当原始的完整的tasks改变后会重新计算filteredTasks
	return (
		<ConfigProvider locale={zhCN}>
			<div className="todos">
				<div className='todos-header'>
					<h3>TASK OA管理系统</h3>
					<Button type='primary' onClick={()=>setAddTaskVisible(true)}>新增任务</Button>
				</div>
				<div className='todos-tags'>
					{
						TASK_STATUS.map(({label,value})=>(
							<Tag key={value} 
							   color={filter === value?'orange':'default'} 
							   onClick={()=>setFilter(value)}>
								{label}
							</Tag>
						))
					}
				</div>
				<Table dataSource={filteredTasks} rowKey='id' loading={loading}>
					<Column title="编号" dataIndex="id"/>
					<Column title="任务描述" dataIndex="description"/>
					<Column title="状态" dataIndex="status" render={
						(value)=>value===1?'未完成':'已完成'
					}/>
					<Column title="预计完成时间" dataIndex="expected_completion_time"/>
					<Column title="实际完成时间" dataIndex="actual_completion_time"/>
					<Column title="操作" render={
						(_,record)=>{
							return (
								<>
									<Popconfirm 
	                                 onConfirm={()=>handleDelete(record.id)}
									 title="确定要删除吗?" 
									 icon={<ExclamationCircleOutlined 
									 style={{color:'red'}}/>}>
									  <a>删除</a>
									</Popconfirm>
									<Popconfirm 
									onConfirm={()=>handleComplete(record.id)}
									title="确定完成了吗?" 
									icon={<ExclamationCircleOutlined 
									style={{color:'green'}}/>} >
									  <a style={{marginLeft:'10px'}}>完成</a>
									</Popconfirm>
								</>
							)
						}
					}/>
				</Table>
			</div>
			<Modal title="新增任务" 
			       open={addTaskVisible} 
				   onCancel={()=>setAddTaskVisible(false)}
				   onOk={handleNewTask}>
					 <Form form={form} layout="vertical">
						<Form.Item 
						label="任务描述"
						name="description"
						rules={[{required:true,message:'请输入任务描述'}]}
						 >
							<Input.TextArea rows={4} />
						</Form.Item>
						<Form.Item
						label="预计完成时间"
						name="expected_completion_time"
						rules={[{required:true,message:'请输入预计完成时间'}]}
						>
							<DatePicker  showTime/>
						</Form.Item>
					 </Form>
			</Modal>
		</ConfigProvider>
	);
}

export default App;//modal model
